<template>
  <view class="login-container">
    <!-- logo -->
    <view class="logo">
      <img src="/static/logo.png" ></img>
    </view>
    
    <!-- 登录表单卡片 -->
    <view class="login-card">
      <!-- 登录方式切换 -->
      <view class="tab-box">
        <view 
          :class="['tab-item', activeType === 'account' ? 'active0' : '']"
          @click="activeType = 'account'"
        >
          账号密码登录
        </view>
        <view 
          :class="['tab-item', activeType === 'phone' ? 'active1' : '']"
          @click="activeType = 'phone'"
        >
          手机号登录
          <view v-if="activeType === 'phone'" class="active-line"></view>
        </view>
      </view>
      <!-- 账号密码登录 -->
      <view v-if="activeType === 'account'" class="input-box">
        <view class="input-item">
          <img src="/static/account.svg"/>
          <input 
            type="text" 
            v-model="formData.username" 
            placeholder="请输入账号"
          />
        </view>
        <view class="input-item">
          <img src="/static/password.svg"/>

          <input 
          style="flex:1"
            :password="showPassword"
            v-model="formData.password" 
            placeholder="请输入密码"
          />
          <text :class="[showPassword ? 'showPassword' : 'hidePassword']"
          @click="changePassword"></text>
        </view>
        <view class="code-box" style="display:flex;align-items:center"> 
          <view class="input-item" style="width:80%">
          <img src="/static/vertification.svg"/>
          <input 
            type="text" 
            v-model="formData.vCode" 
            placeholder="请输入验证码"
          />
          </view>
          <view> 
            <image class="captcha-img" :src="codeImageUrl" @click="refreshCaptcha"></image>


          </view>

        </view>

      </view>
      <!-- 手机号登录 -->
      <view v-else class="input-box">
        <view class="input-item">
          <img src="/static/phoneNumber.svg"/>

          <input 
            type="text" 
            v-model="formData.phone" 
            placeholder="请输入手机号码"
          />
        </view>
        <view class="input-item">
          <img src="/static/message.svg"/>

          <input 
            type="text" 
            v-model="formData.msgCode" 
            placeholder="请输入短信验证码"
          />
          <text class="get-code" @click="getSmsCode">获取验证码</text>
        </view>
        
        <view class="code-box" style="display:flex;align-items:center"> 
          <view class="input-item" style="width:80%">
          <img src="/static/vertification.svg"/>
          <input 
            type="text" 
            v-model="formData.vCode" 
            placeholder="请输入验证码"
          />
          </view>
          <view> 
            <image class="captcha-img" :src="codeImageUrl" @click="refreshCaptcha"></image>


          </view>

        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
import { getCaptcha ,loginByUsername,getVrificationCode} from '@/api/login'
import Crypoto from '@/utils/secret'
import md5 from 'js-md5'
export default {
  data() {
    return {
      codeImageUrl: '',
      showPassword:true,
      activeType: 'account', // 默认显示手机号登录
      formData: {
        // 账号密码登录
        username: '18122188404',
        password: 'TGFsj1146!!',
        captcha: '',
        // 手机号登录
        phone: '',
        msgCode: '',
        vCode: '',
        id:'',
      },
      loginConfig:{
        tenantId: '000000',
        deptId: '',
        roleId: '',
        key: '',
        scope: 'all',
 
      }
    }
  },
  mounted(){
    this.refreshCaptcha()
  },
  methods: {
    
    getSmsCode() {
      // TODO: 获取短信验证码
      getVrificationCode({
        phone:this.formData.phone,
        type: 'login'
      }).then(res=>{
        if(res.code === 200){
          this.formData.id = res.data.id
          uni.showToast({
            title: '获取验证码成功',
            icon: 'success'
          })
        }else {
          uni.showToast({
            title: '获取验证码失败',
            icon: 'none'
          })
        }
      }).catch(err=>{
        uni.showToast({
          title: '获取验证码失败',
          icon: 'none'
        })
      })
    },
    refreshCaptcha() {
      getCaptcha().then(res => {
        console.log(res,'111111111')
        this.codeImageUrl = res.image
        this.loginConfig.key = res.key
      }).catch(err => {
        console.log(err,'222222222')

      })
    },
    handleLogin() {
      // TODO: 根据不同登录方式处理登录
      if (this.activeType === 'account') {
        // 账号密码登录
      } else {
        // 手机号登录
      }
      this.handleLoginSuccess()
    },
    //登录逻辑
   async handleLogin() {
      const { password, username, vCode, passwordAgain, msgCode, id,phone } =this.formData
      // 账号密码登录
      let params = {}
      if (this.activeType === 'account') {
        params = Object.assign({}, this.loginConfig, { password: md5(password), username, vCode, grantType: 'captcha', type: 'account' })


      } else if (this.activeType === 'phone') {
        params = Object.assign({}, this.loginConfig, {
        id,
        value: msgCode,
        username:phone,
        vCode,
        grantType: 'sms_code'
      })

   
      }
      loginByUsername(params).then(res=>{
          uni.setStorageSync('token',res.access_token)
          uni.setStorageSync('userInfo',res)
              this.handleLoginSuccess()
      }).catch(err=>{
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        })
      })



},
    handleLoginSuccess(res) {
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 3000,
        complete:()=>{
          // 跳转到待办页面
          uni.reLaunch({
            url: '/pages/todo/index'
          })
        }
      })

    },
    changePassword(){
      this.showPassword = !this.showPassword
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: url('/static/bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  
  .logo {
    margin-top: 105px;
    margin-bottom: 35px;
    width: 196px;
    height:80px;
    
    img {
      width: 100% !important;
      height: 100% !important;
    }
  }
  
  .login-card {
    width: 335px;
    max-width: 375px; // 设置最大宽度
    background: #FFFFFF;
    border-radius: 12px;
    // padding: 24px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    height: 410px;
    overflow: hidden;

    
    .tab-box {
      display: flex;
      justify-content: center;
      height:60px;
      background: #f5f7fb;
      
      .tab-item {
        position: relative;
        font-size: 14px;
        line-height: 60px;
        color: #999;
        cursor: pointer;
        flex:1;
        text-align: center;
        &.active0{
          background-image:url('/static/矩形0.svg');
          background-size:100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          font-weight: 600;
          color:#000;
        }
        &.active1{
          background-image:url('/static/矩形.svg');
          background-size:100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          font-weight: 600;
          color:#000;


        }
        
        &.active {
          border: 1px solid red;
          color: #2B7AFA;
          font-weight: 500;
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: translateX(-50%);
            width: 16px;
            height: 3px;
            background: #2B7AFA;
            border-radius: 2px;
          }
        }
        
        // 添加分隔线
        &:first-child::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 14px;
          background: #E5E5E5;
        }
      }
    }
    
    .input-box {
      padding: 20px;
      .code-box{
        display: flex;
        align-items: center;
        .captcha-img {
          width: 100px;
          height: 34px;
          margin-left: 10px;
          border-radius: 4px;
        }
      }
      .input-item {
        display: flex;
        align-items: center;
        height: 54px;
        margin-bottom: 16px;
        background: #f5f7fb;
        border-radius: 8px;
        padding: 0 12px;
        font-size: 14px;
        
        .icon {
          width: 20px;
          margin-right: 10px;
          color: #999;
        }
        img{
          margin-right: 10px;
        }
        
        input {
          flex: 1;
          height: 100%;
          font-size: 14px;
          border: none;
          background: transparent;
          
          &::placeholder {
            color: #999;
          }
        }
        
  
        
        .get-code {
          font-size: 14px;
          color: #2B7AFA;
          border-left: 1px solid #E5E5E5;
          cursor: pointer;
          width: 100px;
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
    
    .login-btn {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background: linear-gradient(270deg, #689bff, #1257ea);
      color: #FFFFFF;
      font-size: 16px;
      border-radius: 8px;
      border: none;
      margin-top: 24px;
      box-shadow: 0px 2px 10px 0px rgba(204,209,235,0.51);
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}

// 添加媒体查询，处理特殊设备
@media screen and (max-height: 667px) {
  .login-container {
    .logo {
      margin-top: 30px;
      margin-bottom: 20px;
    }
  }
}

@media screen and (min-height: 812px) {
  .login-container {
    .logo {
      margin-top: 60px;
    }
  }
}

// 横屏适配
@media screen and (orientation: landscape) {
  .login-container {
    padding: 20px;
    
    .logo {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .login-card {
      max-width: 460px;
    }
  }
}
.showPassword{
  background-image: url('/static/showPassword.svg');
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain
}
.hidePassword{
  background-image: url('/static/hidePassword.svg');
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain

}
</style> Password